
<template>
    <div id="animateNum" class="numCon">
      <div v-if="isZero" class="numItem" :style="numStyle">
        <span>
          {{zero}}
        </span> 
      </div>
      <div v-if="isZero && !integer" class="numItem" :style="numStyle">
        <span>
          .
        </span> 
        <span>
          0
        </span> 
        <span>
          0
        </span> 
      </div>
      <div v-else class="numItem" :style="numStyle" v-for="(item, index) in numberArr" :key="index">
          <i-count-up v-if="/^[0-9]+.?[0-9]*/.test(item)" :startVal="startVal" :endVal="item" :decimals="decimals" :duration="duration" :options="options">{{item}}</i-count-up>
          <span v-else>
              {{item}}
          </span>
      </div>
      <div v-if="decimalArr.length > 1"  class="numItem" :style="numStyle" v-for="(decitem, devindex) in decimalArr" :key="10+devindex">
          <i-count-up v-if="/^[0-9]+.?[0-9]*/.test(decitem)" :startVal="startVal" :endVal="decitem" :decimals="decimals" :duration="duration" :options="options">{{item}}</i-count-up>
          <span v-else>
              {{decitem}}
          </span>
      </div>
    </div>
</template>
<script>
import ICountUp from "vue-countup-v2";
export default {
  props: {
    value: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    numStyle: {
      type: String,
      default: () => {
        return "";
      }
    },
    integer: {
      type: Boolean,
      default: () => {
        return true;
      }
    }
  },
  computed: {
    isNumber(res) {
      var re = /^[0-9]+.?[0-9]*/;
      if (!re.test(Number(res))) {
        return false;
      } else {
        return true;
      }
    }
  },
  components: {
    ICountUp
  },
  data() {
    return {
      zero: "0",
      isZero: false,
      startVal: 0,
      decimals: 0,
      duration: 8.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      number: "",
      numberArr: [],
      decimalArr: [] // 小数
    };
  },
  watch: {
    value(res) {
      if (Number(res) === 0) {
        this.formatZero();
        this.isZero = true;
        return;
      } else {
        this.isZero = false;
        this.setNum(res);
      }
    }
  },
  methods: {
    formatZero() {
      if (!this.integer) {
        this.$set(this, "zero", "0");
      }
    },
    setNum(res) {
      // 传过来数字格式
      var num = "";
      // 小数
      if (!this.integer) {
        num = String(res.toFixed(2)).split("."); // 把小数提取出来
      } else {
        // 整数
        num = String(res).split("."); // 把小数提取出来
      }
      const number = Number(num[0]).toLocaleString();
      const numLength = number.length;
      const numberArr = [];
      for (let i = 0; i < numLength; i++) {
        const item = number[i];
        var re = /^[0-9]+.?[0-9]*/;
        if (re.test(Number(item))) {
          numberArr.push(Number(item));
        } else {
          numberArr.push(item);
        }
      }
      this.$set(this, "numberArr", numberArr);
      if (num[1]) {
        // 小数部分
        const decimalNum = String(num[1]);
        const decimalLength = decimalNum.length;
        const decimalArr = ["."];
        for (let a = 0; a < decimalLength; a++) {
          const decItem = decimalNum[a];
          decimalArr.push(Number(decItem));
        }
        this.$set(this, "decimalArr", decimalArr);
      }
    }
  }
};
</script>

<style scoped  lang="scss">
.numCon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  .numItem {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0bd26;
    font-size: 26px;
    span {
      display: inline-block;
      line-height: 100%;
      font-family: DIN Condensed Bold;
    }
  }
  .decimalnum {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0bd26;
    font-size: 22px;
    span {
      display: inline-block;
      line-height: 24px;
      font-family: DIN Condensed Bold;
    }
  }
}
</style>